<template>
<div class="shoppingCartcontainer">
    <!-- 顶部的标题栏 -->
    <back-topic :topic="topic"></back-topic>
    <!-- 空白界面时候显示的内容 -->
    <shopping-car-zero v-if="false"></shopping-car-zero>
    <!-- 标题 -->
    <div class="top">
        <div class="topLeft"  @click="changeShow">
            <img class="topLeftImg" v-show="chooseShow" src="../../assets/image/shoppingCar/choose.png">
        </div>
        <!-- 顶部左侧的时间 -->
        <div class="ownSale">糖医生自营</div>
        <!-- 顶部右侧的待支付，代发货，已完成，或者已取消 -->
        <div class="goodsStatus">满99.00元包邮</div>
    </div>
    <!--购物车的单个商品 -->
    <shopping-car-one></shopping-car-one>
</div>
</template>

<script>
// 引入顶部的返回按钮
import BackTopic from '../commentCompontents/back-topic'
// 引入购物车为空时候，显示的内容
import ShoppingCarZero from '../commentCompontents/shoppingCarZero'
// 单个商品模块
import shoppingCarOne from '../commentCompontents/shoppingCarOne'
export default {
    name: "shoppingCart",
    components: {
        BackTopic,
        ShoppingCarZero,
        shoppingCarOne
    },
    data() {
        return {
            topic: "购物车",
            chooseShow:true,
        }
    },
    methods: {
        changeShow(){
            this.chooseShow==true?this.chooseShow=false:this.chooseShow=true;
        }
    },
}
</script>

<style scoped>

.top {
    height: 1rem;
    /* display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        align-items: center; */
    padding-top: .4rem;

    border-bottom: 1px solid #cccccc;
    border-top: .2rem solid #F2F2F2;
}

.topLeft {
    background: url('../../assets/image/shoppingCar/unchoose.png') no-repeat;
    background-size: cover;
    
    height: .50rem;
    width: .50rem;
    float: left;
}

.topLeftImg {
    height: 100%;
    width: 100%;
    
}

.ownSale {
    width: 2.5rem;
    font-weight: 900;
    font-size: .42rem;
    color: black;
    float: left;
    margin-left: .2rem;
}

.goodsStatus {
    float: right;
    font-size: .4rem;
    color: #4AA4FC;
}
</style>
